<template>
  <view class='container'>
    <view class="header">
      <t-cell-group theme="card">
        <t-cell hover arrow>
          <template #image>
            <t-avatar image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" class="avatar" shape="round" />
          </template>
          <template #title>
            <view class="info">
              <view class="nickname">
                Herbert·Simon
              </view>
              <view class="name">
                微信号:ddgetget
              </view>
              <view class="tag">
                <view class="status">+状态</view>
                <view class="status">
                  <t-avatar-group :max="5" collapse-avatar="+5">
                    <t-avatar v-for="(pic, index) in pics" :key="index" :image="pic" size="22px" />
                  </t-avatar-group>
                </view>
              </view>
            </view>
          </template>
          <templae #note>
            sadsad
          </templae>
        </t-cell>
      </t-cell-group>
    </view>
    <view class="setting">
      <t-cell-group theme="card">
        <t-cell title="服务" left-icon="service" hover arrow />

      </t-cell-group>
    </view>
    <view class="setting">
      <t-cell-group theme="card">
        <t-cell title="收藏" left-icon="service" hover arrow />
        <t-cell title="朋友圈" left-icon="internet" hover arrow />
        <t-cell title="视频号" left-icon="service" hover arrow />
        <t-cell title="订单与卡包" left-icon="internet" hover arrow />
        <t-cell title="表情" left-icon="internet" hover arrow />
      </t-cell-group>
    </view>
    <view class="setting">
      <t-cell-group theme="card">
        <t-cell title="设置" left-icon="service" hover arrow />

      </t-cell-group>
    </view>
    <view class="see-me">
      <QrCode :content="web_url" :width="100" :height="100" :color="{ dark: '#FFFFFF', light: '#ca13a9' }" />
    </view>

  </view>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import QrCode from '@/components/QrCode.vue'
const web_url = ref('https://mobile.simoncome.com/#/pages/me/me')
const pics = ref([
  'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
  'https://tdesign.gtimg.com/mobile/demos/avatar2.png',
  'https://tdesign.gtimg.com/mobile/demos/avatar3.png',
  'https://tdesign.gtimg.com/mobile/demos/avatar4.png',
  'https://tdesign.gtimg.com/mobile/demos/avatar5.png',
])
</script>
<style lang='scss' scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 10rpx;
  background-color: #EDEDED;
  height: calc(100vh - 100rpx);
}

.header {
  margin-top: 50rpx;

  .info {
    display: flex;
    flex-direction: column;
    gap: 10rpx;

    .nickname {
      font-size: 30rpx;
      font-weight: bold;
    }

    .name {
      font-size: 24rpx;
      color: #999;
    }

    .tag {
      display: flex;
      gap: 30rpx;

      .status {
        font-size: 24rpx;
        color: #999;
      }


    }
  }
}

.setting {
  gap: 10rpx;
  margin-top: 20rpx;
}

.see-me {
  margin-top: 50rpx;
  display: flex;
  justify-content: center;
}
</style>